<template>
  <div class="lz-page-body">
    <div class="lz-tool-bar">
      <Card dis-hover>
        <Button type="primary" @click="openRouteAddModal">添加菜单</Button>
      </Card>
    </div>
    <div class="lz-list-content" ref="tableContentRef">
      <Table row-key="id" :columns="routeColumns" :data="routeData" border :height="tableHeight">
        <template #title="{row,index}">
          {{ row.meta.title }}
        </template>
        <template #action="{row,index}">
          <Button class="action-btn" size="small" type="success" @click="openRouteAddModal(null,row.id)">添加</Button>
          <Button class="action-btn" size="small" type="info" @click="openRouteAddModal(row)">编辑</Button>
          <Button class="action-btn" size="small" type="warning" @click="deleteRoute(row.id)">删除</Button>
        </template>
      </Table>
    </div>

  </div>


  <AddRouteModal @get-route-list="getRouteList"></AddRouteModal>

</template>
<script setup>
import {nextTick, onMounted, onUnmounted, ref} from "vue";
import AddRouteModal from "@/module-base/views/sys-manage/permission/add-permission-modal.vue";
import {deleteRouteWithChildren, getRoutes} from '@module-base/api/sysManage'
import {usePermissionStore} from "@/module-base/stores/permissionStore.js";
import {Message, Modal} from "view-ui-plus";
import {useTableHeight} from "@/components/table-height/tableHeight.js";
import CPage from "@/components/lz-page/lz-page.vue";

const {openRouteAddModal: openRouteAddModal} = usePermissionStore()
const {
  tableContentRef,
  tableHeight
} = useTableHeight()
onMounted(async ()=>{
  await getRouteList()
})
const routeColumns = ref([
  {
    title: '路径别名',
    key: 'name',
    tree: true,
    // slot: 'title'
  },
  {
    title: '标题',
    slot: 'title'
  },
  {
    title: '路径地址',
    key: 'componentPath'
  },
  {
    title: '操作',
    slot:'action'
  }
])
const routeData = ref([])

async function getRouteList() {
  const rs2 = await getRoutes()
  routeData.value = rs2.data
}

async function deleteRoute(id) {
  if (!id) {
    Message.error('请选择要删除的数据')
    return
  }
  Modal.confirm({
    title: '删除菜单',
    content: '<p>请确认是否删除选中的菜单</p>',
    loading: true,
    onOk: async () => {
      const rs = await deleteRouteWithChildren(id)
      if (rs.success) {
        await getRouteList()
        Modal.remove()

      }
    }
  });

}




</script>
<style scoped>
.action-btn{
  margin: 0 4px;
}
</style>